<template>
  <div class="bj">
    <input type="text" v-model="text">
    <button @click="copy">点击复制</button>
    <avue-crud
     ref="crud" @search-change="searchChange" @search-reset="resetChange" @row-save="rowSave"
      @row-update="rowUpdate" @row-del="rowDel" :option="option" v-model:page="page" @on-load="onLoad"
      :data="store.tickList">

      <template #status="{ row }">

       <div class="switch" @click="add(row)">
        <img :src="row.status == 1 ? kai : guan" ><span :class="[row.status ==1 ? 'on' : '']">{{row.status ==1 ? '启用' : '停用'}}</span>
       </div>
      </template>
    </avue-crud>

  </div>
</template>

<script setup>
import clipboard3 from 'vue-clipboard3'
import { storeToRefs } from 'pinia';
import { onMounted, toRefs, ref } from 'vue'
import { useStore } from '../../stores/counter'
import { ElMessage } from 'element-plus'
import { getHMS } from '../../utils/time'
import kai from '../../img/启用.png'
import guan from '../../img/停用.png'
onMounted(() => {
  store.Init()
})

const store = useStore()
const text = ref("")
const { toClipboard } = clipboard3();
// console.log(toClipboard);
//一键复制
const copy = async () => {
  try {
    await toClipboard(text.value);
  } catch (error) {
    alert("复制失败!!")
  }
}
//分页
const page = {
  pageSize: 10,
  pagerCount: 3
}

const onLoad = (page) => {
  page.total = 40
}

//点击状态
const add=(row)=>{
   if(row.status == 0){
    row.status = 1
  }else{
    row.status = 0
  }
}


const option = ref({
  column: [
    {
      label: 'ID',
      prop: 'id',
      // search: true,
    },
    {
      label: '车次/类型',
      prop: 'train',
      // search: true,
    },
    {
      label: '车长',
      prop: 'vehicle',
      search: true,
    },
    {
      label: '总座位数',
      prop: 'all',
      search: true,
    },
    {
      label: '车厢数量',
      prop: 'carriage',
      // search: true,
    },
    {
      label: '限乘人数',
      prop: 'num',
      // search: true,
    },
    {
      label: '创建时间',
      prop: 'date',
      type: 'datetime',
      searchSpan: 8,
      width: 160,
      searchRange: true,
      search: true,
    },
    {
      label: '状态',
      prop: 'status',
      solt: true,
    }
  ]
})

const resetChange = (item) => {
  console.log(item);
  store.Init()

}

const searchChange = (params, done) => {

  store.edit(params.vehicle, Number(params.all))
  done();
  //  store.tickList = store.tickList.filter(item=>item.vehicle.includes(params))
}



//增加数据  
const rowSave = (form, done, loading) => {
  // console.log(getHMS(form.date));

  loading();
  store.addItem(form)
  done();
}
//修改数据
const rowUpdate = (form, index, done, loading) => {
  loading();
  done(form);

}

//删除
const rowDel = (form, index, done) => {
  done()
  store.delItem(form)
}

</script>

<style lang="scss" scoped>
.el-table__header-wrapper {
  background-color: #D8DBE2 !important;
}
.switch{
  width: 80px;
  height: 60px;
  display: flex;
  align-items: center;
}
.switch img{
  width: 29px;
  height: 16px;
}
.switch span{
  margin-left: 4px;
}
.on{
  color: #1ba9ba;
}
</style>

